<script setup lang="ts">
import menuOptions from './menu-options.ts'
import ScreenEnum from '@/enum/screen-enum.ts'
import HandlerWithWindowSize from '@/utils/handler-with-window-size.ts'

// 当前激活菜单项的 key
const activeKey = ref<string | null>(null)
// 菜单是否折叠
const collapsed = ref(false)
// 侧边栏折叠按钮类型
const triggerType = ref<'bar' | 'arrow-circle'>('bar')
// 侧边栏是否显示
const siderActive = ref(true)

HandlerWithWindowSize(width => {
  if (width.value <= ScreenEnum.MD) {
    collapsed.value = true
    triggerType.value = 'arrow-circle'
  } else {
    triggerType.value = 'bar'
  }
  if (width.value <= ScreenEnum.SM) {
    siderActive.value = false
  } else {
    siderActive.value = true
  }
})
</script>

<template>
  <n-layout-sider
    v-show="siderActive"
    bordered
    collapse-mode="width"
    :collapsed-width="64"
    :width="240"
    :collapsed="collapsed"
    :show-trigger="triggerType"
    @collapse="collapsed = true"
    @expand="collapsed = false"
  >
    <n-menu
      v-model:value="activeKey"
      :collapsed="collapsed"
      :collapsed-width="64"
      :collapsed-icon-size="22"
      :options="menuOptions"
    />
  </n-layout-sider>
</template>

<style scoped>

</style>
